<template>
  <div class="section dashboard-section">
    <div class="dashboard-content">
      <van-row justify="space-around" gutter="10">
        <van-col span="12">
          <yu-card class="card-list" @click="router.push({ name: 'write' })">
            <template #body>
              <div class="card-body clearfix">
                <div class="info fl">
                  <div class="title ellipsis">写报告</div>
                  <div class="description ellipsis">在这里写报告</div>
                </div>
                <div class="icon fr">
                  <!-- <svg-icon icon-class="color-weChat" ></svg-icon> -->
                  <van-icon name="records" size="1.1rem" />
                </div>
              </div>
            </template>
          </yu-card>
        </van-col>

        <van-col span="12">
          <yu-card class="card-list" @click="router.push({ name: 'checkRp' })">
            <template #body>
              <div class="card-body clearfix">
                <div class="info fl">
                  <div class="title ellipsis">批报告</div>
                  <div class="description ellipsis">标记批改报告</div>
                </div>
                <div class="icon fr">
                  <!-- <svg-icon icon-class="color-find" ></svg-icon> -->
                  <van-icon name="sign" size="1.1rem" />
                </div>
              </div>
            </template>
          </yu-card>
        </van-col>

        <van-col span="12">
          <yu-card class="card-list" @click="router.push({ name: 'daily' })">
            <template #body>
              <div class="card-body clearfix">
                <div class="info fl">
                  <div class="title ellipsis">支部日常</div>
                  <div class="description ellipsis">看看活动会议</div>
                </div>
                <div class="icon fr">
                  <!-- <svg-icon icon-class="color-friend" ></svg-icon> -->
                  <van-icon name="calendar-o" size="1.1rem" />
                </div>
              </div>
            </template>
          </yu-card>
        </van-col>

        <van-col span="12">
          <yu-card class="card-list" @click="router.push({ name: 'learning' })">
            <template #body>
              <div class="card-body clearfix">
                <div class="info fl">
                  <div class="title ellipsis">学习</div>
                  <div class="description ellipsis">在这里学习</div>
                </div>
                <div class="icon fr">
                  <!-- <svg-icon icon-class="color-bao" ></svg-icon> -->
                  <van-icon name="description" size="1.1rem" />
                </div>
              </div>
            </template>
          </yu-card>
        </van-col>

        <van-col span="12">
          <yu-card class="card-list" @click="router.push({ name: 'reading' })">
            <template #body>
              <div class="card-body clearfix">
                <div class="info fl">
                  <div class="title ellipsis">看文章</div>
                  <div class="description ellipsis">在这里阅读</div>
                </div>
                <div class="icon fr">
                  <!-- <svg-icon icon-class="color-bao" ></svg-icon> -->
                  <van-icon name="more-o" size="1.1rem" />
                </div>
              </div>
            </template>
          </yu-card>
        </van-col>

        <van-col span="12">
          <yu-card class="card-list" @click="router.push('/find')">
            <template #body>
              <div class="card-body clearfix">
                <div class="info fl">
                  <div class="title ellipsis">学院动态</div>
                  <div class="description ellipsis">学院近期活动</div>
                </div>
                <div class="icon fr">
                  <!-- <svg-icon icon-class="color-bao" ></svg-icon> -->
                  <van-icon name="replay" size="1.1rem" />
                </div>
              </div>
            </template>
          </yu-card>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted } from "vue";
import { Toast } from 'vant'
import { useStore } from "vuex";
import toasts from "/@/views/components/toasts";
import { useRouter } from "vue-router";
import YuCard from "/@/components/YuCard";
import YuAppCard from "/@/components/YuAppCard";
import listImg from "/@/assets/imgs/list.jpg";
import img1 from "/@/assets/imgs/img1.jpg";
import img2 from "/@/assets/imgs/img2.jpg";
import img3 from "/@/assets/imgs/img3.jpg";

import animal0 from "/@/assets/imgs/zc-avatar.jpg";
import animal1 from "/@/assets/imgs/jb-avatar.jpg";
import animal2 from "/@/assets/imgs/tt-avatar.jpg";
import animal3 from "/@/assets/imgs/ds-avatar.jpg";

const imgs = {
  animal0,
  animal1,
  animal2,
  animal3,
};

const router = useRouter();
const store = useStore();

import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css/bundle";


onMounted(() => {
  const userInfo = store.state.storage.user.userInfo;
  console.log("onMonted", userInfo);
  if (userInfo === undefined) {
    store.dispatch("user/logout");
    router.push(`/login`);
  } else if(userInfo.name === ''){
    router.push('/user')
    Toast.fail('请先完善个人信息');
  }
});
</script>

<style lang="scss" scoped>
.dashboard-section {
  padding: 10px;
  background: var( --yu-color-warn10);
  min-height: 80vh;

  .card-list {
    margin-bottom: 20px;
    background: var(--yu-linear-bg-color-light);
    height:3rem;
    .info {
      text-align: left;
    }
    .title {
      font-weight: 600;
      color: var(--yu-font-color--dark);
      font-size: 17px;
      line-height: 18px;
      margin-bottom: 5px;
    }
    .description {
      color: var(--yu-font-color--dark);
      margin-top: 15px;
      font-size: 6px;
      line-height: 16px;
    }
    .svg-icon {
      width: 38px;
      height: 38px;
    }
  }

  .app-card-list {
    margin-bottom: 30px;
  }



}

</style>
